<template>
    <base-card>
        <div class="flex">
            <div class="blue-radius"></div>
            <h2 class="page-title">药品管理</h2>
        </div>
        <el-form style="display: flex; width: 100%; justify-content: space-between;">
            <el-form-item class="dateItem">
                <span class="dateSpan">发布日期</span>
                <el-form-item class="dateSize">
                    <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="~"
                        start-placeholder="请选择日期" end-placeholder="请选择日期" :shortcuts="shortcuts" :size="size" />
                </el-form-item>
                <el-input v-model="input" style="width: 360px; height: 40px;  --el-text-color-placeholder: #999999;"
                    placeholder="请输入关键字" :suffix-icon="Search" size="default" clearable />
            </el-form-item>
            <el-form-item>
                <el-button style="height: 40px; width: 118px; color: #fff; background-color: rgba(41, 132, 248, 1);"
                    @click="$router.push('/data/medicine/add')">发布药品信息</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="medicineData.rows" style="width: 100% ; margin-top: 20px;" class="Organization-text">
            <el-table-column property="_id" label="序号" />
            <el-table-column label="列表图">
                <template #default="scope">
                    <img :src="scope.row.image" style="width: 80px; height: auto;">
                </template>
            </el-table-column>
            <el-table-column property="name" label="药品标题" />
            <el-table-column property="type" label="药品分类" />
            <el-table-column property="creator" label="发布人" />
            <el-table-column property="state" label="发布状态" />
            <el-table-column property="total" label="收藏量" />
            <el-table-column property="publishTime" label="操作时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary">编辑</el-button>
                    <el-button link type="danger" @click="deleteMedicines(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-end" style="margin-top: 22px; display: flex; justify-content: flex-end;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[10, 20, 50, 100]" background :total="medicineData.total"
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </base-card>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { deleteMedicinesApi, findMedicinesApi } from '../../api/medicine';
const input = ref('');
const value2 = ref([])
const pageData = ref({ currentPage: 1, pageSize: 10 });
onMounted(() => {
    findMedicines()
})
watch([pageData, input, value2], () => {
    findMedicines()
}, { deep: true })

const size = ref('large')
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
const medicineData = reactive({
    rows: [],
    total: 0
});
async function findMedicines() {
    console.log(input.value);
    const res = await findMedicinesApi({
        ...pageData.value,

        name: input.value
    })

    if (res.code == 200) {
        medicineData.rows = res.data.rows;
        medicineData.total = res.data.total;

    } else {
        ElMessage.error(res.message || '获取数据失败');
    }

};
function deleteMedicines(_id) {
    deleteMedicinesApi({ _id })
        .then(res => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
            } else {
                ElMessage.error(res.message)
            }
            findMedicines()
        })
}
</script>

<style scoped>
.topPackage {
    display: flex;
    margin-bottom: 20px;

    span {
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);

    }
}

.topRectangle {
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    margin-right: 20px;
}

.dateItem {

    display: flex;
    align-items: center;
}

.dateSpan {
    font-size: 13px;
    color: #999999;
    margin-right: 20px;
}

.dateSize {
    width: 360px;
    height: 40px;

}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}
</style>